<template>
  <div class="mine">
    <el-main>
      <div class="main_table">
        <el-table :data="showList" border>
          <el-table-column prop="uid" label="UID"> </el-table-column>
          <el-table-column prop="nickname" label="用户名"> </el-table-column>
          <el-table-column prop="avatar" label="头像">
            <template slot-scope="prop">
              <img :src="prop.row.avatar" width="40px">
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号"> </el-table-column>
          <el-table-column prop="created_at" label="创建时间">
            <template slot-scope="prop">
              <span>{{prop.row.created_at | timeFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_page">
        <el-pagination
          background
          :page-size="this.onPage"
          @current-change="pageChange"
          layout="prev, pager, next"
          :total="this.list.length">
        </el-pagination>
      </div>
      <el-dialog title="修改设置" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="用户名">
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onClick">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      showList: [],
      onPage: 10,
      onNext: 10,
      dialogFormVisible: false,
      form: {
        uid: '',
        nickname: '',
        mobile: ''
      }
    };
  },
  mounted() {
    axios.get("http://localhost:8080/list.json").then((res) => {
      // console.log(res.data);
      this.list = res.data;
      for(var i = 0; i <= this.onNext; i++) {
        this.showList.push(this.list[i])
      }
    });
  },
  filters: {
    timeFilter: function(val) {
      var time = new Date(val * 1000)
      return `${time.getFullYear()}年${time.getMonth()}月${time.getDay()}日 
      ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
    }
  },
  methods: {
    handleClick(row) {
      this.dialogFormVisible = true;
      // console.log(row)
      this.form.uid = row.uid;
      this.form.nickname = row.nickname;
      this.form.mobile = row.mobile;
    },
    onClick() {
      // console.log(this.form)
      this.list.forEach(item=> {
        if(item.uid == this.form.uid) {
          item.nickname = this.form.nickname;
          item.mobile = this.form.mobile;
        }
      })
      this.dialogFormVisible = false;
    },
    del(index) {
      this.list.splice(index, 1)
    },
    pageChange(val) {
      // console.log(val)
      this.showList = [];
      var star = (val - 1) * this.onPage;
      var end = val * this.onPage;
      if(end > this.list.length) {
        end = this.list.length;
      }
      for(var i = star; i < end; i++) {
        this.showList.push(this.list[i])
      }     
    }
  }
};
</script>

<style>
.mine {
  width: 100%;
  height: 100%;
}
.main_table {
  height: 80vh;
  overflow: scroll;
}
</style>